<!--商品详情-->
<template>
  <div class="w store-content">
    <div class="gray-box">
      <div class="gallery-wrapper">
        <div class="gallery">
          <div class="thumbnail">
            <ul>
              <li v-for="(smallImage,i) in smallImages" :key="i" :class="{on:bigImage===smallImage}" @click="bigImage=smallImage">
                <img v-lazy="attachUrl(smallImage)" :alt="sku.skuName">
              </li>
            </ul>
          </div>
          <div class="thumb">
            <div class="big">
              <img :src="attachUrl(bigImage)" :alt="sku.skuName">
            </div>
          </div>
        </div>
      </div>
      <!--右边-->
      <div class="banner">
        <div class="sku-custom-title">
          <h4>{{ sku.skuName }}</h4>
          <h6>
            <span>{{ spu.title }}</span>
            <span class="price">
              <em>¥</em><i>{{ Number(sku.price).toFixed(2) }}</i></span>
          </h6>
        </div>
        <div class="num">
          <span class="params-name">型号：{{ spu.model }}</span>
        </div>
        <div class="num">
          <span class="params-name">数量：</span>
          <buy-qty @edit-qty="handleEditQty" />
        </div>
        <div class="num">
          <span class="params-name">库存：{{ spu.stock }}</span>
        </div>
        <div class="buy">
          <mall-button class-style="main-btn" style="width: 145px;height: 50px;line-height: 48px" text="加入购物车" @btnClick="handleAddGoods" />
          <mall-button style="width: 145px;height: 50px;line-height: 48px;margin-left: 10px" text="现在购买" @btnClick="handleBuy" />
        </div>
      </div>
    </div>
    <!--产品信息-->
    <div class="item-info">
      <mall-shelf title="产品信息">
        <div slot="content">
          <div v-if="spu.detailHtml" class="img-item">
            <div style="padding-top: 10px;" v-html="spu.detailHtml">{{ spu.detailHtml || '' }}</div>
          </div>
          <div v-else class="no-info">
            <img src="/images/no-data.png">
            <br>
            该商品暂无内容数据
          </div>
        </div>
      </mall-shelf>
    </div>
  </div>
</template>

<script>
import CartApi from '@/api/order/CartApi.js'
import GoodsApi from '@/api/goods/GoodsApi.js'
import { mapGetters } from 'vuex'
import MallShelf from '@/components/MallShelf'
import BuyQty from '@/components/BuyQty'
import MallButton from '@/components/MallButton'

export default {
  components: {
    MallShelf, BuyQty, MallButton
  },
  data() {
    return {
      spuId: null,
      skuId: null,
      spu: {
        price: 0,
        skuList: [],
        specList: [],
        spuSpecOptionList: []
      },
      sku: {},
      smallImages: [],
      bigImage: null,
      qty: 1
    }
  },
  computed: {
    ...mapGetters([
      'token',
      'userId',
      'showCart',
      'showMoveImg'
    ])
  },
  created() {
    this.spuId = this.$route.query.spuId
    this.skuId = this.$route.query.skuId
    this.init()
  },
  methods: {
    init() {
      GoodsApi.getSpu(this.spuId).then(res => {
        this.spu = res.data
        if (this.spu) {
          this.smallImages = [
            this.spu.image,
            this.spu.giftBoxImage,
            this.spu.sceneImage
          ]
          this.bigImage = this.spu.image
          // 格式化规格信息
          if (this.spu.specList) {
            // 可选项字符串转换为规格的可选项数组
            this.spu.specList.forEach(spec => {
              // 内置的规格可选项
              if (spec.isManuallyAddOption === '0') {
                if (this.spu.spuSpecOptionList && this.spu.spuSpecOptionList.length > 0) {
                  this.spu.spuSpecOptionList.forEach(spuSpecOption => {
                    if (spuSpecOption.specId === spec.id) {
                      const specOptionsArr = spuSpecOption.specOptions.split(',')
                      if (specOptionsArr) {
                        for (const specOption of specOptionsArr) {
                          this.specOptionList.push({ pid: spec.id, name: specOption })
                        }
                      }
                    }
                  })
                }
              }
              // SPU规格可选项
              if (spec.isManuallyAddOption === '1') {
                const specOptionsArr = spec.specOptions.split(',')
                if (specOptionsArr) {
                  for (const specOption of specOptionsArr) {
                    this.specOptionList.push({ pid: spec.id, name: specOption })
                  }
                }
              }
            })
            // 选中所有规格的第一个可选项
            let selectedSpecOptionsStr = ''
            this.spu.specList.forEach(spec => {
              for (const specOption of this.specOptionList) {
                if (specOption.pid === spec.id) {
                  this.$set(specOption, 'selected', true)
                  this.selectedSpecOptions.push(specOption)
                  selectedSpecOptionsStr = specOption.name + ',' + selectedSpecOptionsStr
                  break
                }
              }
            })
            if (selectedSpecOptionsStr) {
              // 使用字符串转数组，与规格下标保持一致
              const selectedSpecOptionsArr = selectedSpecOptionsStr.substr(0, selectedSpecOptionsStr.length - 1).split(',')
              this.spu.skuList.forEach(sku => {
                if (selectedSpecOptionsArr.length === 1 && sku.spec1 === selectedSpecOptionsArr[0]) {
                  this.sku = sku
                }
                if (selectedSpecOptionsArr.length === 2 && sku.spec2 === selectedSpecOptionsArr[0] && sku.spec1 === selectedSpecOptionsArr[1]) {
                  this.sku = sku
                }
                if (selectedSpecOptionsArr.length === 3 && sku.spec3 === selectedSpecOptionsArr[0] && sku.spec2 === selectedSpecOptionsArr[1] && sku.spec1 === selectedSpecOptionsArr[2]) {
                  this.sku = sku
                }
                if (!this.sku.image) {
                  this.sku.image = this.spu.image
                }
                if (!this.sku.stock) {
                  this.sku.stock = 0
                }
              })
            }
          } else {
            this.sku = this.spu.skuList[0]
          }
        }
        if (this.skuId) {
          GoodsApi.getSku(this.skuId).then(res => {
            this.sku = res.data
            this.spu = res.data.spu
            if (this.spu) {
              this.smallImages = [
                this.spu.image,
                this.spu.giftBoxImage,
                this.spu.sceneImage
              ]
              this.bigImage = this.spu.image
              // 格式化规格信息
              if (this.spu.specList) {
                // 可选项字符串转换为规格的可选项数组
                this.spu.specList.forEach(spec => {
                  // 内置的规格可选项
                  if (spec.isManuallyAddOption === '0') {
                    if (this.spu.spuSpecOptionList && this.spu.spuSpecOptionList.length > 0) {
                      this.spu.spuSpecOptionList.forEach(spuSpecOption => {
                        if (spuSpecOption.specId === spec.id) {
                          const specOptionsArr = spuSpecOption.specOptions.split(',')
                          if (specOptionsArr) {
                            for (const specOption of specOptionsArr) {
                              this.specOptionList.push({ pid: spec.id, name: specOption })
                            }
                          }
                        }
                      })
                    }
                  }
                  // SPU规格可选项
                  if (spec.isManuallyAddOption === '1') {
                    const specOptionsArr = spec.specOptions.split(',')
                    if (specOptionsArr) {
                      for (const specOption of specOptionsArr) {
                        this.specOptionList.push({ pid: spec.id, name: specOption })
                      }
                    }
                  }
                })
                // 选中所有规格的第一个可选项
                let selectedSpecOptionsStr = ''
                this.spu.specList.forEach(spec => {
                  for (const specOption of this.specOptionList) {
                    if (specOption.pid === spec.id) {
                      this.$set(specOption, 'selected', true)
                      this.selectedSpecOptions.push(specOption)
                      selectedSpecOptionsStr = specOption.name + ',' + selectedSpecOptionsStr
                      break
                    }
                  }
                })
              }
            }
          })
        }
      })
    },
    // 直接购买
    handleBuy() {
      this.$router.push({ path: '/settlement', query: { skuId: this.sku.id, qty: this.qty }})
    },
    // 添加购物车
    handleAddGoods() {
      debugger
      if (!this.showMoveImg && this.token) { // 动画是否在运动
        CartApi.addGoods({ skuId: this.sku.id }).then(res => {
          this.$store.dispatch('cart/InitCart')
        })
        // // 加入购物车动画
        // var dom = event.target
        // // 获取点击的坐标
        // const elLeft = dom.getBoundingClientRect().left + (dom.offsetWidth / 2)
        // const elTop = dom.getBoundingClientRect().top + (dom.offsetHeight / 2)
        // // 需要触发
        // this.$store.dispatch('cart/AddGoodsAnimation', {
        //   moveShow: true,
        //   elLeft: elLeft,
        //   elTop: elTop,
        //   img: this.spu.image
        // })
        if (!this.showCart) {
          this.$store.dispatch('cart/ShowCart', true)
        }
      } else {
        this.$router.push({ path: '/cart' })
      }
    },
    handleEditQty(skuId, qty) {
      this.qty = qty
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/styles/mixin";

.store-content {
  clear: both;
  width: 1220px;
  min-height: 600px;
  padding: 0 0 25px;
  margin: 0 auto;
}

.gray-box {
  display: flex;
  padding: 60px;
  margin: 20px 0;

  .gallery-wrapper {
    .gallery {
      display: flex;
      width: 540px;

      .thumbnail {
        li:first-child {
          margin-top: 0px;
        }

        li {
          @include wh(80px);
          margin-top: 10px;
          padding: 12px;
          border: 1px solid #f0f0f0;
          border: 1px solid rgba(0, 0, 0, .06);
          border-radius: 5px;
          cursor: pointer;

          &.on {
            padding: 10px;
            border: 3px solid #ccc;
            border: 3px solid rgba(0, 0, 0, .2);
          }

          img {
            display: block;
            @include wh(100%);
          }
        }
      }

      .thumb {
        .big {
          margin-left: 20px;
        }

        img {
          display: block;
          @include wh(440px)
        }
      }
    }
  }

  // 右边
  .banner {
    width: 450px;
    margin-left: 10px;

    h4 {
      font-size: 24px;
      line-height: 1.25;
      color: #000;
      margin-bottom: 13px;
    }

    h6 {
      font-size: 14px;
      line-height: 1.5;
      color: #bdbdbd;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .sku-custom-title {
      overflow: hidden;
      padding: 8px 8px 18px 10px;
      position: relative;
    }

    .params-name {
      padding-right: 20px;
      font-size: 14px;
      color: #8d8d8d;
      line-height: 36px;
    }

    .num {
      padding: 29px 0 8px 10px;
      border-top: 1px solid #ebebeb;
      display: flex;
      align-items: center;
    }

    .buy {
      position: relative;
      border-top: 1px solid #ebebeb;
      padding: 30px 0 0 10px;
    }
  }
}

.item-info {

  .gray-box {
    padding: 0;
    display: block;
  }

  .img-item {
    width: 1220px;
    // padding: 1vw;
    text-align: center;

    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }
}

.no-info {
  padding: 200px 0;
  text-align: center;
  font-size: 30px;
}

.price {
  display: block;
  color: #d44d44;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  text-align: right;

  i {
    padding-left: 2px;
    font-size: 24px;
  }
}
</style>
